<template>
  <div class="hello">

<!--    <h1> {{ msg }}</h1>-->
    <input type="button" value="加载" v-on:click="loadData()" />

    <input v-model="user1userName" />

    <ul>
      <li v-for="person in persons" :key="person.name" >
        {{person.name}}
      </li>
    </ul>

    <ul>
      <li v-for="userItem in user" :key="userItem.name" >
        {{userItem.name}}
        {{userItem.sex}}
        {{userItem.address}}
      </li>
    </ul>


    <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />
    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
        <keep-alive>
          <tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>

  </div>


</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      userName:"11111",
      user1userName: "",
      persons: [
        {name: '前端工程师'},
        {name: 'java后端工程师'},
        {name: '运维工程师'},
        {name: '大数据工程师'},
        {name: 'ui工程师'}
      ],

      user: [
        {name: '蒙大拿',sex:'男',address:'浙江杭州'},
        {name: '理性',sex:'男21',address:'浙江221杭州'},
        {name: '感性',sex:'男2',address:'浙江2杭州'},
        {name: '哲学',sex:'男1',address:'浙江1杭州'},
      ],
      tabMapOptions: [
        { label: 'China', key: 'CN' },
        { label: 'USA', key: 'US' },
        { label: 'Japan', key: 'JP' },
        { label: 'Eurozone', key: 'EU' }
      ],
      activeName: 'CN',
      createdTimes: 0

    }


  },
  methods: {
    loadData(){
      this.$ajax.post("http://localhost:8082/vue/user/infoList1").then(function (res) {
        console.log(res);
        console.log(res.data.msg);
        //this.data.userInfoList = res.

      })
      .catch(function (res) {
        console.log("异常了")
      })

    },

    showCreatedTimes() {
      this.createdTimes = this.createdTimes + 1
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
